<template>
<div class="tenantManage">
  <search-block>
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addTenant">添加租户</el-button>
    </template>
    <el-form inline :model="model" label-width="100px" @submit.native.prevent>
      <el-form-item label="租户名:">
        <el-input v-model="model.tenantName"></el-input>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns"
  >
    <el-table-column slot="status" label="是否冻结" align="center" header-align="center">
      <template v-slot="scope">
        <el-popconfirm
          :title="scope.row.status === '0' ? '是否确认冻结该租户？' : '是否确认解冻该租户？'"
          @confirm="() => {
          if(scope.row.status === '0') lockTenant(scope.row)
            else unlockTenant(scope.row);
          }"
        >
          <el-switch
            disabled
            slot="reference"
            v-model="scope.row.status"
            active-value="1"
            inactive-value="0"></el-switch>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="210">
      <template v-slot="scope">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="addTenantUser(scope.row)">添加商户管理员</el-button>
          <el-button type="primary" size="mini" @click="editTenant(scope.row)">编辑</el-button>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="forms.formColumns"
    @ensure="ensureModel">
    <template slot="auth">
      <el-select v-model="forms.formModel.auth" clearable multiple>
        <el-option
          v-for="item in forms.rolesList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"></el-option>
      </el-select>
    </template>
  </y-form>
  <y-form
    v-model="tenantUserForms.formModel"
    :visible.sync="tenantUserForms.showForm"
    :title="`添加【${tenantUserForms.currentForm.tenantName}】商户管理员`"
    destroy-on-close
    width="50%"
    :form-attrs="tenantUserForms.formAttrs"
    :columns="tenantUserForms.formColumns"
    @ensure="ensureTenantUserModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "tenantManage",
  inject: ['pattern'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.system.queryTenant,
        param: this.model
      }
    }
  },
  data(){
    return{
      model:{
        tenantName: '',
      },
      columns: [{
        label: "租户名称",
        prop: "tenantName"
      },{
        label: "营业执照",
        prop: "businessLicense"
      },{
        label: "统一信用编码",
        prop: "socialCreditCode"
      },{
        label: "负责人",
        prop: "chargeUser"
      },{
        label: "联系电话",
        prop: "chargeUserMobile"
      },{
        label: "是否冻结",
        prop: "status",
        template: true
      }],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加租户',
          'EDIT': '编辑租户'
        },
        formModel:{
          tenantName: '',
          businessLicense: '',
          socialCreditCode: '',
          chargeUser: '',
          chargeUserMobile: '',
          status: '0',
          remarks: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '120px',
          rules: {
            tenantName: [{required: true, message: "请输入租户名", trigger: "blur"}],
            businessLicense: [{required: true, message: "请输入营业执照编码", trigger: "blur"}],
            socialCreditCode: [{required: true, message: "请输入统一信用编码", trigger: "blur"}],
            chargeUser: [{required: true, message: "请输入责任人", trigger: "blur"}],
            chargeUserMobile: [{required: true, message: "请输入联系电话", trigger: "blur"}],
          }
        },
        formColumns: [{
          label: "租户名称",
          prop: "tenantName",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 10,
              showWordLimit: true
            }
          }
        },{
          label: "营业执照",
          prop: "businessLicense",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 32,
              showWordLimit: true
            }
          }
        },{
          label: "统一信用编码",
          prop: "socialCreditCode",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 32,
              showWordLimit: true
            }
          }
        },{
          label: "负责人",
          prop: "chargeUser",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 10,
              showWordLimit: true
            }
          }
        },{
          label: "联系电话",
          prop: "chargeUserMobile",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 15,
              showWordLimit: true
            }
          }
        },{
          label: "备注",
          prop: "remarks",
          comp:{
            compType: 'input',
            attrs:{
              type: 'textarea',
              autosize: { minRows: 3},
              maxlength: 100,
              showWordLimit: true
            }
          }
        }]
      },
      tenantUserForms: {
        formModel:{
          userName: '',
          realName: '',
          mobileNum: '',
          email: ''
        },
        currentForm: {},
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            userName: [{required: true, message: "请输入登录名", trigger: "blur"}],
            realName: [{required: true, message: "请输入真实姓名", trigger: "blur"}],
            mobileNum: [
              {required: true, message: "请输入手机号码", trigger: "blur"},
              {pattern: this.pattern.phone, message: "手机号码格式不正确", trigger: "blur"}
            ],
            email: [
              {required: true, message: "请输入邮箱", trigger: "blur"},
              {pattern: this.pattern.email, message: "邮箱格式不正确", trigger: "blur"}
            ]
          }
        },
        formColumns:[
          {
            label: "登录名",
            prop: "userName",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 20,
                showWordLimit: true
              }
            }
          },{
            label: "真实姓名",
            prop: "realName",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 10,
                showWordLimit: true
              }
            }
          },{
            label: "手机号",
            prop: "mobileNum",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 11,
                showWordLimit: true
              }
            }
          },{
            label: "邮箱",
            prop: "email",
            comp:{
              compType: 'input',
              attrs:{
                maxlength: 30,
                showWordLimit: true
              }
            }
          }
        ],
      }
    }
  },
  methods: {
    resetForm(data = this.forms.currentForm){
      this.forms.formModel = Object.assign({
        tenantName: '',
        businessLicense: '',
        socialCreditCode: '',
        chargeUser: '',
        chargeUserMobile: '',
        status: '0',
        remarks: ''
      }, data)
    },
    resetTenantUserForm(){
      Object.keys(this.tenantUserForms.formModel).map(key => {
        this.tenantUserForms.formModel[key] = '';
      })
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    addTenant(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    lockTenant(row){
      this.$yAxios({
        url: this.$api.system.lockTenant,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功冻结租户【${row.tenantName}】`
        });
        row.status = '1';
      });
    },
    unlockTenant(row){
      this.$yAxios({
        url: this.$api.system.unlockTenant,
        data:{
          id: row.id
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: `成功解冻租户【${row.tenantName}】`
        });
        row.status = '0';
      });
    },
    editTenant(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = Object.assign({}, form);
      }
      this.$yAxios({
        url: this.$api.system.saveTenant,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      });
    },
    ensureTenantUserModel(form){
      let newForm = Object.assign({ tenantId: this.tenantUserForms.currentForm.id }, form);
      this.$yAxios({
        url: this.$api.system.saveTenantUser,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search();
      })
    },
    addTenantUser(row){
      this.tenantUserForms.currentForm = row;
      this.resetTenantUserForm();
      this.tenantUserForms.showForm = true;
    }
  },
}
</script>

<style scoped>

</style>